import React, {PureComponent} from "react";
import {Button, DatePicker, Icon, Input, Select, Table} from "antd";


const RangePicker = DatePicker.RangePicker;

const Option = Select.Option;

/**
 * 警报管理界面
 */
class WarningManagerComponent extends PureComponent {


    render() {

        const columns = [
            {
                title: <div style={{textAlign: "center"}}>异常时间</div>,
                dataIndex: 'exceptionTime',
                render: text => <div style={{textAlign: "center"}}>${text}</div>
            },
            {
                title: <div style={{textAlign: "center"}}>车牌号</div>,
                dataIndex: 'carNumber',
                render: text => <div style={{textAlign: "center"}}>${text}</div>
            },
            {
                title: <div style={{textAlign: "center"}}>终端编号</div>,
                dataIndex: 'machineNumber',
                render: text => <div style={{textAlign: "center"}}>${text}</div>
            },
            {
                title: <div style={{textAlign: "center"}}>姓名</div>,
                dataIndex: "name",
                render: text => <div style={{textAlign: "center"}}>${text}</div>
            },
            {
                title: <div style={{textAlign: "center"}}>联系方式</div>,
                dataIndex: "phone",
                render: text => <div style={{textAlign: "center"}}><Icon type={"wifi"}/></div>
            },
            {
                title: <div style={{textAlign: "center"}}>报警类型</div>,
                dataIndex: "warningType",
                render: text => <div style={{textAlign: "center"}}>${text}</div>
            },
            {
                title: <div style={{textAlign: "center"}}>报警值</div>,
                dataIndex: "warningGrade",
                render: text => <div style={{textAlign: "center"}}><Icon type={"copy"}/></div>
            },
            {
                title: <div style={{textAlign: "center"}}>报警状态</div>,
                dataIndex: "warningStatus",
                render: text => <div style={{textAlign: "center"}}><Icon type={"form"}/></div>
            },
            {
                title: <div style={{textAlign: "center"}}>报警描述</div>,
                dataIndex: "warningRecord",
                render: text => <div style={{textAlign: "center"}}>${text}</div>
            },
            {
                title: <div style={{textAlign: "center"}}>是否处理</div>,
                dataIndex: "handleStatus",
                render: text => <div style={{textAlign: "center"}}><Icon type={"form"}/></div>
            },
            {
                title: <div style={{textAlign: "center"}}>处理结果</div>,
                dataIndex: "handleResult",
                render: text => <div style={{textAlign: "center"}}>${text}</div>
            }];

        const data = [
            {
                key: '1',
                exceptionTime:"2018.01.01",
                carNumber: '0010',
                machineNumber: '10001',
                name: 'John Brown',
                phone: '15646655',
                warningType: "充电预警",
                warningGrade: "100",
                warningStatus: "异常",
                warningDetail: "报警详情",
                warningRecord: "报警记录",
                handleStatus: true,
                handleResult: "处理结果"
            },

        ];


        const pagination = {
            showQuickJumper: true,
            pageSize: 10,
            current: 1,
        };



        return (
            <div style={warningWrapperStyle}>
                <div style={wrapperCenterWrapper}>
                    <div>
                        <span style={searchSpanStyle}>选择日期</span>
                        <RangePicker
                            showTime={{format: 'HH:mm'}}
                            format="YYYY-MM-DD HH:mm"
                            placeholder={['Start Time', 'End Time']}
                            style={rangePickerStyle}
                        />

                        <span style={searchSpanStyle}>终端编号</span>
                        <Input style={inputStyle} placeholder={"请输入终端编号"}/>

                        <span style={searchSpanStyle}>姓名</span>
                        <Input style={inputStyle} placeholder={"请输入姓名"}/>

                        <span style={searchSpanStyle}>报警类型</span>
                        <Select defaultValue={"全部"} style={selectStyle}>
                            <Option value={"全部"}>全部</Option>
                            <Option value={"温度报警"}>温度报警</Option>
                            <Option value={"电压预警"}>电压预警</Option>
                            <Option value={"电瓶防盗预警"}>电瓶防盗预警</Option>
                            <Option value={"整车防盗预警"}>整车防盗预警</Option>
                        </Select>

                        <span style={searchSpanStyle}>报警状态</span>
                        <Select defaultValue={"全部"} style={selectStyle}>
                            <Option value={"全部"}>全部</Option>

                            <Option value={"正在报警"}>正在报警</Option>

                            <Option value={"报警解除"}>报警解除</Option>

                        </Select>

                        <Button htmlType={"primary"}>搜索</Button>
                    </div>

                    <Table
                        columns={columns}
                        dataSource={data}
                        pagination={pagination}
                        style={{margin:"20px 12px 0 "}}
                    />
                </div>
            </div>
        );
    }


}

export default WarningManagerComponent;

const warningWrapperStyle = {
    borderRadius: 4,
    backgroundColor: "#fff",
    height: '100%',
};

const wrapperCenterWrapper = {
    padding: "10px 12px",
    height: '100%',
};

const searchSpanStyle = {
    display: "inline-block",
    marginRight: 12,
    fontSize: 14,
};

const selectStyle={
    width: 130,
    marginRight:12,
};


const inputStyle = {
    width: 150,
    fontSize: 12,
    marginRight: 12,
};

const rangePickerStyle ={
    marginRight:12,
};